<template>
	<view class="distribution">
		<scroll-view scroll-x="true" class="scroll_content">
			<block v-for="(item, index) in list" :key="index">
				<view class="item" @click="itemClick(item, index)" v-if="item.shipping_type == 1">
					<view class="option acea-row">
						<view class="option_l">
							<text class="num">{{ item.no }}</text>
							<text class="txt">配送</text>
						</view>
						<view class="option_r" :style="{backgroundColor: (item.is_transfer == 1 || item.refund_status != 0) ? '#b3b1b1' : '#a0cd43'}">
							<block v-if="item.refund_status == 0">
								<text v-if="item.status == 0">{{item.is_transfer == 1 ? '已赠送' : '待配送'}}</text>
								<text v-if="item.status == 1">{{item.is_transfer == 1 ? '已赠送' : '配送中'}}</text>
								<text v-if="item.status == 2">{{item.is_transfer == 1 ? '已赠送' : '已配送'}}</text>
							</block>
							<text v-if="item.refund_status == 1">退款中</text>
							<text v-if="item.refund_status == 2">已退款</text>
						</view>
					</view>
					<view class="time">{{ item.delivery_day }}</view>
					<view class="select" v-if="isSelect">
						<checkbox value="" :checked="item.checked" :disabled="item.is_transfer == 1" />
					</view>
					<view class="tip" v-if="item.is_transfer == 1">已赠送</view>
					<view class="tip" v-if="item.refund_status == 1">退款中</view>
					<view class="tip" v-if="item.refund_status == 2">已退款</view>
				</view>
				<view class="item" v-else @click="itemClick(item, index)">
					<view class="option acea-row">
						<view class="option_l">
							<text class="num">{{ item.no }}</text>
							<text class="txt">自提</text>
						</view>
						<view class="option_r" style="background-color: #F0AD4E;">
							<text>待自提</text>
						</view>
					</view>
					<view class="time">
						{{ item.delivery_day }}
					</view>
					<view class="select" v-if="isSelect">
						<checkbox value="" :checked="item.checked" /><text></text>
					</view>
				</view>
			</block>
		</scroll-view>
		<view class="tips" v-if="showTips">
			<view class="tip_item">
				<text class="dot"></text>
				<text>已完成/锁定/取消</text>
			</view>
			<view class="tip_item">
				<text class="dot yellow"></text>
				<text>待自提</text>
			</view>
			<view class="tip_item">
				<text class="dot green"></text>
				<text>待配送</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"distribution",
		props: {
			showTips: {
				type: Boolean,
				default: true
			},
			isSelect: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			itemClick(data, index) {
				if(data.checked) {
					data.checked = false
				} else {
					data.checked = true
				}
				if(data.refund_status != 0) return;
				this.$emit('itemClick', data, index)
			}
		}
	}
</script>

<style lang="scss">
.distribution {
	width: 100%;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 10rpx 30rpx 30rpx;
	.scroll_content {
		width: 100%;
		white-space: nowrap;
		
		.item {
			position: relative;
			display: inline-block;
			width: 35%;
			margin-top: 40rpx;
			&:not(:last-child) {
				margin-right: 20rpx;
			}
			.option {
				.option_l {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 50%;
					background-color: #eee;
					padding: 10rpx;
					border-radius: 10rpx 0 0 10rpx;
					.num {
						font-size: 32rpx;
						font-weight: 700;
					}
					.txt {
						font-size: 20rpx;
						border-top: 1px solid #666;
						border-bottom: 1px solid #666;
						padding: 0 20rpx;
					}
				}
				.option_r {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 50%;
					background-color: #999;
					border-radius: 0 10rpx 10rpx 0;
					padding: 10rpx;
					text {
						display: block;
						width: 85rpx;
						height: 85rpx;
						line-height: 85rpx;
						text-align: center;
						font-size: 20rpx;
						border: 1px solid #fff;
						border-radius: 50%;
						color: #fff;
					}
				}
			}
			.time {
				text-align: center;
				margin-top: 20rpx;
			}
			.tip {
				position: absolute;
				top: 0;
				left: 50%;
				border: 1px solid #666;
				font-size: 20rpx;
				transform: translate(-60%, -50%) rotate(-25deg);
				padding: 0 10rpx;
			}
			.select {
				text-align: center;
				margin-top: 10rpx;
			}
		}
	}
	.tips {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		.tip_item {
			flex: 2 1 1;
			.dot {
				display: inline-block;
				width: 20rpx;
				height: 20rpx;
				background-color: #666;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			.yellow {
				background-color: #F0AD4E;
			}
			.green {
				background-color: #a0cd43;
			}
			&:nth-child(2) {
				margin: 0 60rpx;
			}
		}
	}
}
</style>
